// 定义函数
@function rgbaColor($color, $alpha) {
  @return rgba($color, $alpha);
}

// 图标
@for $i from 8 through 60 {
  .ic-#{$i} {
    height: #{$i}#{$Tr-unit};
    width: #{$i}#{$Tr-unit};
    object-fit: contain;
  }
}

@for $i from 1 through 10 {
  $alpha: $i / 10;
  .cr-wt-#{$i} {
    color: rgbaColor($white-color, $alpha);
  }
}

@for $i from 1 through 10 {
  $alpha: $i / 10;
  .cr-bk-#{$i} {
    color: rgbaColor($black-color, $alpha);
  }
}

.cr {
  &-pm {
    color: $main-color;
  }
}

.bg {
  &-pm {
    background-color: #0087d6;
  }
  &-mb {
    background-color: $menu-background;
  }

  &-pb {
    background-color: $page-background;
  }

  &-f5 {
    background-color: #f5f5f5;
  }

  &-f8 {
    background-color: #f8f8f8;
  }

  &-fff {
    background-color: #fff;
  }
}

.ts {
  &-al {
    transition: all 0.4s;
  }
}

.op {
  @for $i from 10 through 100 {
    &-#{$i} {
      opacity: #{$i / 100};
    }
  }
}

$borderColors: (
  77f: #787bdf,
  e7: #e7e7e7,
  pm: #0087d6,
  dc: #dcdcdc,
);

.bd {
  @each $key, $value in $borderColors {
    @for $i from 1 through 50 {
      &-#{$key}-#{$i} {
        border: #{$i}#{$Tr-unit} solid $value;
      }
    }
    &-#{$key}-bt {
      border-bottom: 1 +#{$Tr-unit} solid $value;
    }
    &-#{$key}-tp {
      border-top: 1 +#{$Tr-unit} solid $value;
    }
    &-#{$key}-lf {
      border-left: 1 +#{$Tr-unit} solid $value;
    }
    &-#{$key}-rt {
      border-right: 1 +#{$Tr-unit} solid $value;
    }
  }

  @for $i from 1 through 50 {
    &-rd-#{$i} {
      border-radius: #{$i}#{$Tr-unit};
    }
  }
}

.cs {
  &-pt {
    cursor: pointer;
  }
  &-df {
    cursor: default;
  }
}
.of {
  &-at {
    overflow: auto;
  }
  &-hd {
    overflow: hidden;
  }
  &-y-sr {
    overflow-y: auto;
  }
  &-y-hd {
    overflow-y: hidden;
  }
  &-x-sr {
    overflow-x: auto;
  }
  &-x-hd {
    overflow-x: hidden;
  }
  &-np {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.hv {
  &-x-sr:hover {
    overflow-x: auto;
  }
  &-y-sr:hover {
    overflow-y: auto;
  }
}
